<template>
	<el-card class='cardperson'>
		<div class="divperson">
			<h3>用户名：{{ username }}</h3>
			<h3>邮箱：{{ email }}</h3>
			<el-collapse class='collpserson'>
				<el-collapse-item title="历史评论" name="1" class='collitempserson'>
					<div v-for="item in comment" :key="item.id">
						<div>{{ item.content }}</div>
						<div>{{ item.time }}</div>
					</div>
				</el-collapse-item>
			</el-collapse>
		</div>
	</el-card>
</template>

<script>
	export default {
		name: 'person',
		data() {
			return {
				username: 'frankyi',
				email: '1270484925@qq.com',
				comment: [{
						id: 1,
						time: '20200910',
						content: '妙啊'
					},
					{
						id: 2,
						time: '20200910',
						content: '妙啊'
					},
					{
						id: 3,
						time: '20200910',
						content: '妙啊'
					},
					{
						id: 4,
						time: '20200910',
						content: '妙啊'
					}
				]
			}
		}
	}
</script>

<style>
	.cardperson {
		width: 100%;
		height: 100%;
	}
	.divperson {
		margin-left: 10%;
	}
	.collpserson {
		margin-right: 10%;
	}
	.collitempserson {
		font-size: 20px;
	}
</style>
